<template>
  <div class="setting-container">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/page' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/page/group' }">小组列表</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: `/page/group/groupdetail/${listId}` }" >组内空间</el-breadcrumb-item>
    <el-breadcrumb-item>小组设置</el-breadcrumb-item>
  </el-breadcrumb>
    <el-tabs v-model="activeName">
        <el-tab-pane class="group" label="小组设置" name="first">
           <div>
           <el-form label-position="top" label-width="80px" :model="formLabelAlign">
                <el-form-item label="小组名称" >
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="小组简介">
                    <el-input v-model="formLabelAlign.region"></el-input>
                </el-form-item>
                 <el-form-item label="小组柚记标签">
                    <el-input class="input-new-tag"  v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                        >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                    <el-tag v-for="(tag, index) in categoryList" :key="index">{{tag}}</el-tag>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="uploadGroup">立即更新</el-button>
                    <el-button type="danger" @click="onDelete(listId)">解散小组</el-button>
                </el-form-item>
            </el-form>
           </div>
        </el-tab-pane>
        <el-tab-pane class="member" label="成员管理" name="second">
            <p>小组总人数一共{{memberList.totalmembers}}人</p>
            <div class="showMembers" ref="groupMember">
              <div v-for="(item, index) in memberList.user" :key="item.id" class="member" @mouseenter="showDelete(index)" @mouseleave="leave()">
                <el-avatar :src="item.url"></el-avatar>
                <p>{{item.nickname}}</p>
                <span class="delete" @click="deleteMember(item.uid)" v-show="seen&&index==current"><i class="el-icon-delete"></i></span>
              </div>
            </div>

            <el-form>
                <el-form-item label="邀请成员：">
                    <el-input :value="code">
                      <el-button type="warning" plain slot="append" icon="el-icon-search" @click="createCode" :disabled="!isCreateCode">生成邀请码</el-button>
                    </el-input>
                </el-form-item>
                </el-form>
        </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import { createGroupCode, deleteGroupMembers, getList, updateGroup, getIntro, deleteGroup } from '@/utils/api/group'
export default {
  name: '',
  components: {},
  props: {
    listId: {
      required: true
    }
  },
  data () {
    return {
      dynamicTags: [''],
      inputVisible: false,
      inputValue: ['一一'],
      formLabelAlign: {
        name: '',
        region: '',
      },
      activeName: 'first',
      isCreateCode: true,
      code: '',
      memberList: '', // 存储获取来的成员列表
      seen: false,
      current: null,
      categoryList: []
    }
  },
  created () {
    // 加载小组简介等
    this.loadIntro()
    // 加载小组信息
    this.loadList()
    const hashLocation = sessionStorage.getItem("hashLocation");// 缓存中获取当前页面的路由名称
    const newLocation = hashLocation.split("#/")[1];
    // 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除
    this.$matomo.setCustomUrl("http://39.105.118.190" + "/" + newLocation);// 覆盖页面报告的url，可以自定义页面url，加上本页面路由
    // this.$matomo.trackEvent(shopCode,hashLocation);//事件
    this.$matomo.trackPageView(hashLocation);// 页面名称,可以自定义页面名称
  },
  methods: {
    loadIntro () {
      getIntro(this.listId).then(res => {
        this.formLabelAlign.name = res.data.data.GroupUpdateParam.name
        this.formLabelAlign.region = res.data.data.GroupUpdateParam.insruction
        this.categoryList = res.data.data.GroupUpdateParam.categoryList
        this.groupId = res.data.data.leader
      })
    },
    loadList () {
      // 调用获取小组信息的函数
      getList(this.listId).then(res => {
        // 给data里面赋获取来的值
        this.memberList = res.data.data;
      })
    },
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm () {
      const inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    createCode () {
      const data = {
        gid: this.listId
      }
      createGroupCode(data).then(res => {
        this.code = res.data.data;
        this.isCreateCode = false
      }).catch(() => {
        this.$message('生成邀请码失败')
      })
    },
    showDelete (index) {
      this.seen = true
      this.current = index
    },
    leave () {
      this.seen = false
      this.current = null
    },
    deleteMember (id) {
      this.$confirm('确认删除该组员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const user = JSON.parse(window.sessionStorage.getItem('user'))
        if (user.username === this.groupId) {
          const data = {
            gid: this.listId,
            uid: id
          }
          deleteGroupMembers(data).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.loadList()
          })
        } else {
          this.$message({
            message: '您没有此操作权限！',
            type: 'warning'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除小组
    onDelete () {
      this.$confirm('确认解散吗？', '退出提示', {
        confirmButtonText: '解散',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const user = JSON.parse(window.sessionStorage.getItem('user'))
          if (user.username === this.groupId) {
            deleteGroup(this.listId).then(res => {
              this.centerDialogVisible = false
              this.$notify({
                title: '成功',
                message: '小组解散成功',
                type: 'success'
              });
              this.$router.push({
                name: 'GroupShow'
              })
            }
            )
          } else {
            this.$message({
              message: '请联系组长更新小组，您没有此权限！',
              type: 'warning'
            });
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    // 更新小组资料
    uploadGroup () {
      const user = JSON.parse(window.sessionStorage.getItem('user'))
      if (user.username === this.groupId) {
        const params = {
          categoryList: this.dynamicTags,
          name: this.formLabelAlign.name,
          insruction: this.formLabelAlign.region
        }
        updateGroup(this.listId, params).then(res => {
          this.$notify({
            title: '成功',
            message: '小组信息更新成功',
            type: 'success'
          })
        })
      } else {
        this.$message({
          message: '请联系组长更新小组，您没有此权限！',
          type: 'warning'
        });
      }
    }

  }
}
</script>

<style lang="less" scoped>
.el-tabs{
    width: 60%;
    margin: 20px auto;
    .el-tabs__item{
        font-size: 20px;
    }
    /deep/.el-tab-pane{
        font-size: 15px;
    }
    /deep/.el-tabs__item:hover{
        color: orange;
    }
    /deep/.el-tabs__item.is-active{
        color: orange;
    }
    /deep/.el-tabs__active-bar{
        background-color: orange;
    }
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .showMembers{
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
    .member{
      display: inline-block;
      flex: 0 0 12.5%;
      margin: 20px 0;
      cursor: pointer;
      position: relative;
      :nth-child(1){
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
      }
      :nth-child(2){
        text-align: center;
      }
      :nth-child(3){
        display: inline-block;
        background-color: rgba(119, 112, 112, 0.555);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 20px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        .el-icon-delete{
          display: inline-block;
          position: relative;
        }
      }
    }
  }
  /deep/ .el-icon-delete:before{
    content: "\e6d7";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
